:host,
:root {
  --bew-page-max-width: 2280px;

  --bew-base-font-size: 14.8px;

  --bew-radius: 12px;
  --bew-radius-half: calc(var(--bew-radius) / 2);

  --bew-top-bar-height: 64px;

  // #region Filters
  // Use this in all components (except dialogs) if you want to add a frosted glass effect
  --bew-filter-glass-1: blur(20px) saturate(180%);

  // Use this in dialogs if you want to add a frosted glass effect
  --bew-filter-glass-2: blur(30px) saturate(180%);

  // Apply this to the Bilibili icon if it is an image with the brand's original blue or pink color
  // Change it to glow effect to matches the user's theme color
  --bew-filter-icon-glow: saturate(0) brightness(2) drop-shadow(0 0 0.2px white)
    drop-shadow(0 0 0.5px var(--bew-theme-color)) drop-shadow(0 0 0.5px var(--bew-theme-color))
    drop-shadow(0 0 0.5px var(--bew-theme-color)) drop-shadow(0 0 2px var(--bew-theme-color-80));
  // #endregion

  // #region Shadows
  // The shadows of the card, button, and other slightly elevated components1
  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.04);

  // The shadows of the top bar, header, elevated fixed buttons/cards and other components that are in the a fixed or sticky position
  --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06);

  // The shadows of the popover, dropdown
  --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.12), 0 8px 10px -6px rgb(0 0 0 / 0.08);

  // Only used in the dialog
  --bew-shadow-4: 0 34px 50px -20px rgb(0 0 0 / 0.14), 0 32px 45px -12px rgb(0 0 0 / 0.1),
    0 30px 40px -8px rgb(0 0 0 / 0.12);

  // Use this to imitate the frosted glass edge effect in components with a frosted glass design (except dialogs)
  --bew-shadow-edge-glow-1: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 10px rgba(255, 255, 255, 0.6);

  // Use this for dialogs with the frosted glass effect
  --bew-shadow-edge-glow-2: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.2),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.12), inset 0 0 14px rgba(255, 255, 255, 0.62);

  // #endregion

  // #region Theme Color & Status Colors
  // To add a hover effect to theme or status colors, use the `--bew-*-color` for the base color and `--bew-*-color-80` for the hover state

  --bew-logo-color: var(--bew-theme-color);

  --bew-bili-blue: hsl(195 100% 42%);
  --bew-bili-pink: hsl(343 94% 72%);

  // In light mode use the black; in dark mode use white
  --bew-theme-color-auto: var(--bew-text-1);

  --bew-theme-color: hsl(195 100% 42%);
  --bew-theme-color-10: color-mix(in oklab, var(--bew-theme-color), transparent 90%);
  --bew-theme-color-20: color-mix(in oklab, var(--bew-theme-color), transparent 80%);
  --bew-theme-color-30: color-mix(in oklab, var(--bew-theme-color), transparent 70%);
  --bew-theme-color-40: color-mix(in oklab, var(--bew-theme-color), transparent 60%);
  --bew-theme-color-50: color-mix(in oklab, var(--bew-theme-color), transparent 50%);
  --bew-theme-color-60: color-mix(in oklab, var(--bew-theme-color), transparent 40%);
  --bew-theme-color-70: color-mix(in oklab, var(--bew-theme-color), transparent 30%);
  --bew-theme-color-80: color-mix(in oklab, var(--bew-theme-color), transparent 20%);
  --bew-theme-color-90: color-mix(in oklab, var(--bew-theme-color), transparent 10%);

  --bew-info-color: hsl(198 93% 60%);
  --bew-info-color-10: color-mix(in oklab, var(--bew-info-color), transparent 90%);
  --bew-info-color-20: color-mix(in oklab, var(--bew-info-color), transparent 80%);
  --bew-info-color-30: color-mix(in oklab, var(--bew-info-color), transparent 70%);
  --bew-info-color-40: color-mix(in oklab, var(--bew-info-color), transparent 60%);
  --bew-info-color-50: color-mix(in oklab, var(--bew-info-color), transparent 50%);
  --bew-info-color-60: color-mix(in oklab, var(--bew-info-color), transparent 40%);
  --bew-info-color-70: color-mix(in oklab, var(--bew-info-color), transparent 30%);
  --bew-info-color-80: color-mix(in oklab, var(--bew-info-color), transparent 20%);
  --bew-info-color-90: color-mix(in oklab, var(--bew-info-color), transparent 10%);

  --bew-success-color: hsl(164 60% 40%);
  --bew-success-color-10: color-mix(in oklab, var(--bew-success-color), transparent 90%);
  --bew-success-color-20: color-mix(in oklab, var(--bew-success-color), transparent 80%);
  --bew-success-color-30: color-mix(in oklab, var(--bew-success-color), transparent 70%);
  --bew-success-color-40: color-mix(in oklab, var(--bew-success-color), transparent 60%);
  --bew-success-color-50: color-mix(in oklab, var(--bew-success-color), transparent 50%);
  --bew-success-color-60: color-mix(in oklab, var(--bew-success-color), transparent 40%);
  --bew-success-color-70: color-mix(in oklab, var(--bew-success-color), transparent 30%);
  --bew-success-color-80: color-mix(in oklab, var(--bew-success-color), transparent 20%);
  --bew-success-color-90: color-mix(in oklab, var(--bew-success-color), transparent 10%);

  --bew-warning-color: hsl(48 90% 53%);
  --bew-warning-color-10: color-mix(in oklab, var(--bew-warning-color), transparent 90%);
  --bew-warning-color-20: color-mix(in oklab, var(--bew-warning-color), transparent 80%);
  --bew-warning-color-30: color-mix(in oklab, var(--bew-warning-color), transparent 70%);
  --bew-warning-color-40: color-mix(in oklab, var(--bew-warning-color), transparent 60%);
  --bew-warning-color-50: color-mix(in oklab, var(--bew-warning-color), transparent 50%);
  --bew-warning-color-60: color-mix(in oklab, var(--bew-warning-color), transparent 40%);
  --bew-warning-color-70: color-mix(in oklab, var(--bew-warning-color), transparent 30%);
  --bew-warning-color-80: color-mix(in oklab, var(--bew-warning-color), transparent 20%);
  --bew-warning-color-90: color-mix(in oklab, var(--bew-warning-color), transparent 10%);

  --bew-error-color: hsl(358 75% 59%);
  --bew-error-color-10: color-mix(in oklab, var(--bew-error-color), transparent 90%);
  --bew-error-color-20: color-mix(in oklab, var(--bew-error-color), transparent 80%);
  --bew-error-color-30: color-mix(in oklab, var(--bew-error-color), transparent 70%);
  --bew-error-color-40: color-mix(in oklab, var(--bew-error-color), transparent 60%);
  --bew-error-color-50: color-mix(in oklab, var(--bew-error-color), transparent 50%);
  --bew-error-color-60: color-mix(in oklab, var(--bew-error-color), transparent 40%);
  --bew-error-color-70: color-mix(in oklab, var(--bew-error-color), transparent 30%);
  --bew-error-color-80: color-mix(in oklab, var(--bew-error-color), transparent 20%);
  --bew-error-color-90: color-mix(in oklab, var(--bew-error-color), transparent 10%);
  // #endregion

  // #region Text colors
  // In light mode, use black; in dark mode, use white
  --bew-text-auto: white;

  --bew-text-1: hsl(217 19% 10%);

  // It can also be used for the text that is followed or subscribed to
  --bew-text-2: hsl(215 19% 24% / 80%);

  --bew-text-3: hsl(215 19% 28% / 60%);

  // It can also be used for the text that is disabled
  --bew-text-4: hsl(215 19% 36% / 40%);
  // #endregion

  // #region Webpage background colors
  // Used as a webpage background color, but not on the Bilibili homepage (www.bilibili.com)
  --bew-bg: hsl(0 0% 100%);

  // Used as the background color of the Bilibili homepage (www.bilibili.com)
  --bew-homepage-bg: hsl(240 31% 96%);
  --bew-homepage-bg-mask-opacity: 0;
  --bew-homepage-bg-mask: hsl(240 31% 96% / var(--bew-homepage-bg-mask-opacity));
  // #endregion

  --bew-content-opacity: 0.68;

  // #region Content colors, used to buttons, cards, popover and so on
  // Variable names that don't contain `solid` are used to frosted glass effect elements

  // `--bew-content-*` for the flat background elements
  // #region `--bew-content-*` background colors
  --bew-content: hsl(0 0% 100% / var(--bew-content-opacity));
  --bew-content-hover: hsl(0 0% 85% / var(--bew-content-opacity));
  --bew-content-alt: hsl(240 31% 95% / var(--bew-content-opacity));
  --bew-content-alt-hover: hsl(240 31% 80% / var(--bew-content-opacity));

  --bew-content-solid: hsl(0 0% 100%);
  --bew-content-solid-hover: hsl(0 0% 85%);
  --bew-content-alt-solid: hsl(240 31% 95%);
  --bew-content-alt-solid-hover: hsl(240 31% 85%);
  // #endregion

  // `--bew-elevated-*` for popup, dialog and difference layers with difference elevation levels
  // #region `--bew-elevated-*` background colors
  --bew-elevated: hsl(0 0% 100% / var(--bew-content-opacity));
  --bew-elevated-hover: hsl(0 0% 85% / var(--bew-content-opacity));
  --bew-elevated-alt: var(--bew-content-alt);
  --bew-elevated-alt-hover: var(--bew-content-alt-hover);

  --bew-elevated-solid: hsl(0 0% 100%);
  --bew-elevated-solid-hover: hsl(0 0% 85%);
  --bew-elevated-alt-solid: var(--bew-content-alt-solid);
  --bew-elevated-alt-solid-hover: var(--bew-content-alt-alt-solid-hover);
  // #endregion
  // #endregion

  // #region Gray semi-transparent colors
  // You can used for buttons, input fields and the other components on the top of elements
  --bew-fill-1: rgb(131 131 145 / 13%);

  // Used this for hovering color if it within the top layer of elements,
  // not just when hovering over the element itself; otherwise, use `--bew-content-*-hover` or `--bew-elevated--hover`
  --bew-fill-2: rgb(131 131 145 / 23%);

  // You can used for the disabled state of elements on the top layer
  --bew-fill-3: rgb(131 131 145 / 33%);

  // You can use this as the frosted glass mask, such as on the right side of the "Watch Later" page panel and the "Favorites" page panel
  --bew-fill-4: rgb(131 131 145 / 63%);

  --bew-fill-alt: rgb(255 255 255 / 43%);

  // This color is used in skeleton screens
  --bew-skeleton: var(--bew-fill-2);
  // #endregion

  --bew-border-color: rgb(131 131 145 / 18%);
}

:host(.dark),
:root.dark {
  // dark mode

  // #region shadow
  --bew-shadow-1: 0 4px 6px -1px rgb(0 0 0 / 0.18), 0 2px 4px -2px rgb(0 0 0 / 0.14);
  --bew-shadow-2: 0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.16);
  --bew-shadow-3: 0 20px 25px -5px rgb(0 0 0 / 0.22), 0 8px 10px -6px rgb(0 0 0 / 0.18);
  --bew-shadow-4: 0 34px 50px -20px rgb(0 0 0 / 0.24), 0 32px 45px -12px rgb(0 0 0 / 0.2),
    0 30px 40px -8px rgb(0 0 0 / 0.22);

  --bew-shadow-edge-glow-1: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 10px rgba(255, 255, 255, 0.04);
  --bew-shadow-edge-glow-2: inset 1px 1px 1px -0.5px rgba(255, 255, 255, 0.12),
    inset -1px -1px 1px -0.5px rgba(255, 255, 255, 0.04), inset 0 0 14px rgba(255, 255, 255, 0.06);
  // #endregion

  --bew-logo-color: var(--bew-text-1);

  --bew-theme-color-auto: var(--bew-text-1);

  --bew-text-auto: black;
  --bew-text-1: hsl(215 19% 98%);
  --bew-text-2: hsl(215 19% 90% / 80%);
  --bew-text-3: hsl(215 19% 82% / 60%);
  --bew-text-4: hsl(215 19% 74% / 40%);

  --bew-bg: hsl(230 12% 6%);
  --bew-homepage-bg: hsl(230 12% 6%);
  --bew-homepage-bg-mask: hsl(230 12% 6% / var(--bew-homepage-bg-mask-opacity));

  --bew-content: hsl(230 12% 10% / var(--bew-content-opacity));
  --bew-content-hover: hsl(230 12% 26% / var(--bew-content-opacity));
  --bew-content-alt: hsl(240 14% 13% / var(--bew-content-opacity));
  --bew-content-alt-hover: hsl(240 14% 29% / var(--bew-content-opacity));

  --bew-content-solid: hsl(230 12% 10%);
  --bew-content-solid-hover: hsl(230 12% 26%);
  --bew-content-alt-solid: hsl(240 14% 13%);
  --bew-content-alt-solid-hover: hsl(240 14% 29%);

  --bew-elevated: hsl(230 12% 14% / var(--bew-content-opacity));
  --bew-elevated-hover: hsl(230 12% 30% / var(--bew-content-opacity));
  --bew-elevated-alt: var(--bew-elevated);
  --bew-elevated-alt-hover: var(--bew-elevated-hover);

  --bew-elevated-solid: hsl(230 12% 14%);
  --bew-elevated-solid-hover: hsl(230 12% 30%);
  --bew-elevated-alt-solid: var(--bew-elevated-solid);
  --bew-elevated-alt-solid-hover: var(--bew-elevated-hover-solid);

  --bew-fill-1: rgb(131 131 145 / 14%);
  --bew-fill-2: rgb(131 131 145 / 24%);
  --bew-fill-3: rgb(131 131 145 / 34%);
  --bew-fill-4: rgb(131 131 145 / 64%);
  --bew-fill-alt: var(--bew-fill-1);

  --bew-border-color: rgb(131 131 145 / 26%);
}

:root.dark.bewly-design.forceDark,
:host(.dark.bewly-design.forceDark) {
  --bew-filter-force-dark: invert(0.98) hue-rotate(180deg) brightness(1.1);
}

:host(.disable-frosted-glass),
:root.disable-frosted-glass {
  --bew-content-opacity: 1;
  --bew-filter-glass-1: none;
  --bew-filter-glass-2: none;
  --bew-shadow-edge-glow-1: 0 0 0 transparent;
  --bew-shadow-edge-glow-2: 0 0 0 transparent;
  --bew-fill-alt: var(--bew-content-solid);
}

:host(.disable-frosted-glass.dark),
:root.disable-frosted-glass.dark {
  --bew-fill-alt: var(--bew-fill-1);
}

:host(.reduce-frosted-glass-blur),
:root.reduce-frosted-glass-blur {
  --bew-filter-glass-1: blur(10px) saturate(180%);
  --bew-filter-glass-2: blur(20px) saturate(180%);
}

:root.bewly-design,
:root.bewly-design * {
  --brand_pink: var(--bew-theme-color);
  --brand_pink_thin: var(--bew-theme-color-20);
  --brand_blue: var(--bew-theme-color);
  --brand_blue_thin: var(--bew-theme-color-20);

  --brand_pink_hover: var(--bew-theme-color-80);
  --brand_pink_active: var(--bew-theme-color);
  --brand_pink_disabled: var(--bew-theme-color-60);
  --brand_blue_hover: var(--bew-theme-color-80);
  --brand_blue_active: var(--bew-theme-color);
  --brand_blue_disabled: var(--bew-theme-color-60);

  --text_link: var(--bew-theme-color-80);

  --bpx-fn-color: var(--bew-theme-color);
  --bpx-primary-color: var(--bew-theme-color);
  --bpx-fn-hover-color: var(--bew-theme-color-80);

  --bpx-box-shadow: rgba(0, 0, 0, 0.15);
  --bpx-toast-fn-color: var(--bew-theme-color);
  --bpx-toast-fn-hover-color: var(--bew-theme-color-80);
  --bpx-primary-color: var(--bew-theme-color);

  --Lb0: color-mix(in oklab, var(--bew-theme-color), white 75%);
  --Lb1: color-mix(in oklab, var(--bew-theme-color), white 60%);
  --Lb2: color-mix(in oklab, var(--bew-theme-color), white 45%);
  --Lb3: color-mix(in oklab, var(--bew-theme-color), white 30%);
  --Lb4: color-mix(in oklab, var(--bew-theme-color), white 15%);
  --Lb5: var(--bew-theme-color);
  --Lb6: color-mix(in oklab, var(--bew-theme-color), black 15%);
  --Lb7: color-mix(in oklab, var(--bew-theme-color), black 30%);
  --Lb8: color-mix(in oklab, var(--bew-theme-color), black 45%);
  --Lb9: color-mix(in oklab, var(--bew-theme-color), black 60%);
  --Lb10: color-mix(in oklab, var(--bew-theme-color), black 75%);
}

:root.dark.bewly-design,
:root.dark.bewly-design * {
  --stress_red: var(--Re5);
  --stress_red_thin: var(--Re1);
  --success_green: var(--Gr5);
  --success_green_thin: var(--Gr1);
  --operate_orange: var(--Or5);
  --operate_orange_thin: var(--Or1);
  --pay_yellow: var(--Ye5);
  --pay_yellow_thin: var(--Ye1);
  --bg1: var(--bew-bg);
  --bg2: var(--bew-content-solid);
  --bg3: var(--bew-content-alt-solid);
  --bg1_float: var(--bew-elevated-solid);
  --bg2_float: var(--bew-elevated-solid);
  // --graph_white: var(--bew-bg);
  --graph_bg_thin: color-mix(in oklab, var(--bew-content-solid), black 10%);
  --graph_bg_regular: var(--bew-content-solid);
  --graph_bg_thick: color-mix(in oklab, var(--bew-content-solid), white 10%);
  --graph_weak: color-mix(in oklab, var(--bew-content-solid), white 20%);
  --graph_medium: color-mix(in oklab, var(--bew-content-solid), white 30%);
  --graph_bold: color-mix(in oklab, var(--bew-content-solid), white 40%);
  --graph_icon: color-mix(in oklab, var(--bew-content-solid), white 50%);
  --shadow: var(--Ba0);
  --text_white: var(--Wh0_u);
  --text1: var(--bew-text-1);
  --text2: var(--bew-text-2);
  --text3: var(--bew-text-3);
  --text4: var(--bew-text-4);
  // --text_link: var(--bew-theme-color);
  --text_notice: var(--Ye6);
  --line_light: var(--bew-fill-1);
  --line_regular: var(--bew-fill-2);
  --line_bold: var(--bew-fill-3);

  --graph_bg_thin_rgb: 13, 14, 17;

  --bpx-aux-header-bg: var(--bew-content-solid);
  --bpx-aux-header-icon: var(--bew-text-2);
  --bpx-aux-header-font: var(--bew-text-1);
  --bpx-aux-content-bg: var(--bew-bg);
  --bpx-aux-content-font1: var(--bew-text-1);
  --bpx-aux-content-font2: var(--bew-text-2);
  --bpx-aux-footer-bg: var(--bew-content-solid);
  --bpx-aux-footer-font: var(--bew-text-3);
  --bpx-aux-footer-font-hover: var(--bew-text-1);
  --bpx-dmsend-main-bg: var(--bew-content-solid);
  --bpx-dmsend-input-bg: var(--bew-fill-1);
  --bpx-dmsend-info-font: var(--bew-text-1);
  --bpx-dmsend-switch-icon: var(--bew-text-2);
  --bpx-dmsend-border: var(--bew-border-color);
  --bpx-dmsend-input-font: var(--bew-text-1);
  --bg1_rgb: 13, 14, 17;

  --Lb0: color-mix(in oklab, var(--bew-theme-color), black 75%);
  --Lb1: color-mix(in oklab, var(--bew-theme-color), black 60%);
  --Lb2: color-mix(in oklab, var(--bew-theme-color), black 45%);
  --Lb3: color-mix(in oklab, var(--bew-theme-color), black 30%);
  --Lb4: color-mix(in oklab, var(--bew-theme-color), black 15%);
  --Lb5: var(--bew-theme-color);
  --Lb6: color-mix(in oklab, var(--bew-theme-color), white 15%);
  --Lb7: color-mix(in oklab, var(--bew-theme-color), white 30%);
  --Lb8: color-mix(in oklab, var(--bew-theme-color), white 45%);
  --Lb9: color-mix(in oklab, var(--bew-theme-color), white 60%);
  --Lb10: color-mix(in oklab, var(--bew-theme-color), white 75%);
}

// #region Bilibili original css variables
:root.bewly-design {
  --Ga0: #f6f7f8;
  --Ga0_s: #f6f7f8;
  --Ga0_t: #f6f7f8;
  --Ga1: #f1f2f3;
  --Ga1_s: #f1f2f3;
  --Ga1_t: #f1f2f3;
  --Ga1_e: #f1f2f3;
  --Ga2: #e3e5e7;
  --Ga2_t: #e3e5e7;
  --Ga3: #c9ccd0;
  --Ga3_t: #c9ccd0;
  --Ga4: #aeb3b9;
  --Ga4_t: #aeb3b9;
  --Ga5: #9499a0;
  --Ga5_t: #9499a0;
  --Ga6: #797f87;
  --Ga6_t: #797f87;
  --Ga7: #61666d;
  --Ga7_t: #61666d;
  --Ga8: #484c53;
  --Ga8_t: #484c53;
  --Ga9: #2f3238;
  --Ga9_t: #2f3238;
  --Ga10: #18191c;
  --Ga10_t: #18191c;
  --Ga11: #ffffff;
  --Ga12: #f1f2f3;
  --Ga12_s: #f6f7f8;
  --Ga13: #f1f2f3;
  --Ga13_s: #f1f2f3;
  --Wh0: #ffffff;
  --Wh0_s: #ffffff;
  --Wh0_t: #ffffff;
  --Ba0: #000000;
  --Ba0_s: #000000;
  --Ba0_t: #000000;
  --Pi0: #fff3f6;
  --Pi1: #ffecf1;
  --Pi2: #ffd9e4;
  --Pi3: #ffb3ca;
  --Pi4: #ff8cb0;
  --Pi5: #ff6699;
  --Pi5_t: #ff6699;
  --Pi6: #e84b85;
  --Pi7: #d03171;
  --Pi8: #ad1c5b;
  --Pi9: #771141;
  --Pi10: #3f0723;
  --Ma0: #fef3fc;
  --Ma1: #fdebfa;
  --Ma2: #fbd7f4;
  --Ma3: #f7aeeb;
  --Ma4: #f286e2;
  --Ma5: #ee5ddb;
  --Ma6: #da41cb;
  --Ma7: #c525ba;
  --Ma8: #9b1797;
  --Ma9: #670f67;
  --Ma10: #330834;
  --Re0: #fef3f2;
  --Re1: #feecea;
  --Re2: #fdd7d4;
  --Re3: #fcafaa;
  --Re4: #fa857f;
  --Re5: #f85a54;
  --Re6: #e23d3d;
  --Re7: #c9272c;
  --Re8: #9f1922;
  --Re9: #710e18;
  --Re10: #3b060d;
  --Or0: #fff6ee;
  --Or1: #fff0e3;
  --Or2: #ffe1c7;
  --Or3: #ffc18f;
  --Or4: #ffa058;
  --Or5: #ff7f24;
  --Or6: #e95b03;
  --Or7: #bb4100;
  --Or8: #8d2d00;
  --Or9: #5e1b00;
  --Or10: #2f0c00;
  --Ye0: #fffaef;
  --Ye1: #fff6e4;
  --Ye2: #ffeec9;
  --Ye3: #ffdb93;
  --Ye4: #ffc65d;
  --Ye5: #ffb027;
  --Ye6: #fa9600;
  --Ye7: #c26e00;
  --Ye8: #8a4a00;
  --Ye9: #5b2e00;
  --Ye10: #2f1600;
  --Ly0: #fffcec;
  --Ly1: #fffadf;
  --Ly2: #fff5bf;
  --Ly3: #ffea80;
  --Ly4: #ffdc40;
  --Ly5: #ffcc00;
  --Ly6: #d5a300;
  --Ly7: #aa7d00;
  --Ly8: #805a00;
  --Ly9: #553900;
  --Ly10: #2b1b00;
  --Lg0: #f7fbef;
  --Lg1: #f2f9e4;
  --Lg2: #e3f2c8;
  --Lg3: #c7e691;
  --Lg4: #a9d95b;
  --Lg5: #88cc24;
  --Lg6: #66b105;
  --Lg7: #4e8e04;
  --Lg8: #376a03;
  --Lg9: #224702;
  --Lg10: #102301;
  --Gr0: #effbf3;
  --Gr1: #e4f8ea;
  --Gr2: #caf1d6;
  --Gr3: #95e4af;
  --Gr4: #5fd689;
  --Gr5: #2ac864;
  --Gr6: #0eb350;
  --Gr7: #089043;
  --Gr8: #046e35;
  --Gr9: #034926;
  --Gr10: #012414;
  --Cy0: #edfbfb;
  --Cy1: #e2f8f8;
  --Cy2: #c4eff0;
  --Cy3: #89e1e1;
  --Cy4: #4fd3d1;
  --Cy5: #14c4bf;
  --Cy6: #02aaaa;
  --Cy7: #018488;
  --Cy8: #015f66;
  --Cy9: #013d44;
  --Cy10: #001d22;
  --Lb0: #ecfafe;
  --Lb1: #dff6fd;
  --Lb2: #bfedfa;
  --Lb3: #80daf6;
  --Lb4: #40c5f1;
  --Lb5: #00aeec;
  --Lb6: #008ac5;
  --Lb7: #00699d;
  --Lb8: #004b76;
  --Lb9: #002f4f;
  --Lb10: #001627;
  --Bl0: #f3f5ff;
  --Bl1: #ebefff;
  --Bl2: #d7dfff;
  --Bl3: #b0c1ff;
  --Bl4: #88a4ff;
  --Bl5: #6188ff;
  --Bl6: #4c6de4;
  --Bl7: #3752c8;
  --Bl8: #2136ac;
  --Bl9: #121f7f;
  --Bl10: #080d41;
  --Pu0: #f9f4ff;
  --Pu1: #f6edff;
  --Pu2: #eddbff;
  --Pu3: #d8b6ff;
  --Pu4: #c392ff;
  --Pu5: #ac6dff;
  --Pu6: #8f56e4;
  --Pu7: #723ecc;
  --Pu8: #5627b3;
  --Pu9: #371683;
  --Pu10: #190a44;
  --Br0: #faf8f6;
  --Br1: #f7f3f0;
  --Br2: #efe7e0;
  --Br3: #e0cfc1;
  --Br4: #d0b7a3;
  --Br5: #c19d84;
  --Br6: #a5816a;
  --Br7: #856553;
  --Br8: #634a3e;
  --Br9: #423029;
  --Br10: #211815;
  --Si0: #f9fbfc;
  --Si1: #f5f7fa;
  --Si2: #ebeff4;
  --Si3: #d7e0ea;
  --Si4: #c3d0df;
  --Si5: #afc0d5;
  --Si6: #8d9fb9;
  --Si7: #6d7f9c;
  --Si8: #4d5d7c;
  --Si9: #323d54;
  --Si10: #191e2b;
  --Ga0_rgb: 246, 247, 248;
  --Ga0_s_rgb: 246, 247, 248;
  --Ga1_rgb: 241, 242, 243;
  --Ga1_s_rgb: 241, 242, 243;
  --Ga2_rgb: 227, 229, 231;
  --Ga3_rgb: 201, 204, 208;
  --Ga5_rgb: 148, 153, 160;
  --Ga7_rgb: 97, 102, 109;
  --Ga10_rgb: 24, 25, 28;
  --Ga11_rgb: 255, 255, 255;
  --Ga12_rgb: 241, 242, 243;
  --Ga12_s_rgb: 246, 247, 248;
  --Ga13_rgb: 241, 242, 243;
  --Ga13_s_rgb: 241, 242, 243;
  --Wh0_rgb: 255, 255, 255;
  --Wh0_s_rgb: 255, 255, 255;
  --Ba0_rgb: 0, 0, 0;
  --Pi1_rgb: 255, 236, 241;
  --Pi5_rgb: 255, 102, 153;
  --Re1_rgb: 254, 236, 234;
  --Re5_rgb: 248, 90, 84;
  --Or1_rgb: 255, 240, 227;
  --Or5_rgb: 255, 127, 36;
  --Ye1_rgb: 255, 246, 228;
  --Ye5_rgb: 255, 176, 39;
  --Ye6_rgb: 250, 150, 0;
  --Gr1_rgb: 228, 248, 234;
  --Gr5_rgb: 42, 200, 100;
  --Lb1_rgb: 223, 246, 253;
  --Lb5_rgb: 0, 174, 236;
  --Lb7_rgb: 0, 105, 157;
}

// https://s1.hdslb.com/bfs/static/jinkela/long/laputa-css/dark.css
:root.dark.bewly-design {
  --Ga0: #101011;
  --Ga0_s: #1e2022;
  --Ga0_t: #1e2022;
  --Ga1: #0a0b0c;
  --Ga1_s: #232527;
  --Ga1_t: #232527;
  --Ga1_e: #232527;
  --Ga2: #2f3134;
  --Ga2_t: #2f3134;
  --Ga3: #46494d;
  --Ga3_t: #46494d;
  --Ga4: #5e6267;
  --Ga4_t: #5e6267;
  --Ga5: #757a81;
  --Ga5_t: #757a81;
  --Ga6: #8b9097;
  --Ga6_t: #8b9097;
  --Ga7: #a2a7ae;
  --Ga7_t: #a2a7ae;
  --Ga8: #b9bdc2;
  --Ga8_t: #b9bdc2;
  --Ga9: #d0d3d7;
  --Ga9_t: #d0d3d7;
  --Ga10: #e7e9eb;
  --Ga10_t: #e7e9eb;
  --Ga11: #242628;
  --Ga12: #1f2022;
  --Ga12_s: #2b2c2f;
  --Ga13: #1a1b1d;
  --Ga13_s: #2f3134;
  --Wh0: #17181a;
  --Wh0_s: #2f3134;
  --Wh0_t: #17181a;
  --Ba0: #000000;
  --Ba0_s: #ffffff;
  --Ba0_t: #000000;
  --Pi0: #26161c;
  --Pi1: #2f1a22;
  --Pi2: #472030;
  --Pi3: #76304b;
  --Pi4: #a73e65;
  --Pi5: #d44e7d;
  --Pi5_t: #d44e7d;
  --Pi6: #dc6d94;
  --Pi7: #e38caa;
  --Pi8: #ebabc1;
  --Pi9: #f2cad8;
  --Pi10: #fae9ef;
  --Ma0: #261525;
  --Ma1: #2e182d;
  --Ma2: #461c43;
  --Ma3: #72296c;
  --Ma4: #a13396;
  --Ma5: #cb41bb;
  --Ma6: #d462c7;
  --Ma7: #dd83d3;
  --Ma8: #e6a4de;
  --Ma9: #efc5ea;
  --Ma10: #f8e6f6;
  --Re0: #261314;
  --Re1: #2e1617;
  --Re2: #471a1c;
  --Re3: #742728;
  --Re4: #a63131;
  --Re5: #d1403e;
  --Re6: #d9615f;
  --Re7: #e18281;
  --Re8: #e9a3a2;
  --Re9: #f1c5c4;
  --Re10: #f9e5e5;
  --Or0: #28180f;
  --Or1: #301b10;
  --Or2: #4a230e;
  --Or3: #783610;
  --Or4: #a9490d;
  --Or5: #d66011;
  --Or6: #dd7c3a;
  --Or7: #e49764;
  --Or8: #ebb38d;
  --Or9: #f2ceb6;
  --Or10: #faeadf;
  --Ye0: #2a1e0f;
  --Ye1: #342410;
  --Ye2: #4d300b;
  --Ye3: #7c4c08;
  --Ye4: #ad6800;
  --Ye5: #db8700;
  --Ye6: #e19c2c;
  --Ye7: #e7b158;
  --Ye8: #eec584;
  --Ye9: #f4dab1;
  --Ye10: #faefdd;
  --Ly0: #2a2310;
  --Ly1: #332a11;
  --Ly2: #49390c;
  --Ly3: #745909;
  --Ly4: #a27c00;
  --Ly5: #cca000;
  --Ly6: #d5b02c;
  --Ly7: #dec158;
  --Ly8: #e7d184;
  --Ly9: #efe2b1;
  --Ly10: #f8f2dd;
  --Lg0: #19220f;
  --Lg1: #1e2911;
  --Lg2: #273c0e;
  --Lg3: #3c600f;
  --Lg4: #50840b;
  --Lg5: #67a70e;
  --Lg6: #81b638;
  --Lg7: #9cc562;
  --Lg8: #b6d58b;
  --Lg9: #d0e4b5;
  --Lg10: #ebf3df;
  --Gr0: #102017;
  --Gr1: #11271b;
  --Gr2: #123923;
  --Gr3: #175c34;
  --Gr4: #198042;
  --Gr5: #1fa251;
  --Gr6: #46b26f;
  --Gr7: #6dc28d;
  --Gr8: #93d2ab;
  --Gr9: #bae2c9;
  --Gr10: #e1f3e8;
  --Cy0: #0c1f20;
  --Cy1: #0d2627;
  --Cy2: #093739;
  --Cy3: #085b5c;
  --Cy4: #028080;
  --Cy5: #03a29f;
  --Cy6: #2fb2b0;
  --Cy7: #5ac2c0;
  --Cy8: #86d2d1;
  --Cy9: #b2e2e1;
  --Cy10: #ddf3f3;
  --Lb0: #0a1b23;
  --Lb1: #0b202a;
  --Lb2: #082d40;
  --Lb3: #064a69;
  --Lb4: #006996;
  --Lb5: #0087bd;
  --Lb6: #2c9cc8;
  --Lb7: #58b1d4;
  --Lb8: #84c5df;
  --Lb9: #b1dbeb;
  --Lb10: #ddeff6;
  --Bl0: #151826;
  --Bl1: #181c2f;
  --Bl2: #1f2748;
  --Bl3: #2e3c76;
  --Bl4: #3b53a8;
  --Bl5: #4b6bd4;
  --Bl6: #6a85db;
  --Bl7: #899ee3;
  --Bl8: #a9b8ea;
  --Bl9: #c8d2f2;
  --Bl10: #e7ebf9;
  --Pu0: #1d1628;
  --Pu1: #221a31;
  --Pu2: #31214c;
  --Pu3: #4e317d;
  --Pu4: #6d3fb1;
  --Pu5: #8c50e0;
  --Pu6: #a06ee5;
  --Pu7: #b48deb;
  --Pu8: #c8abf0;
  --Pu9: #dbc9f5;
  --Pu10: #f0e8fb;
  --Br0: #211d1b;
  --Br1: #282320;
  --Br2: #382f2a;
  --Br3: #59483f;
  --Br4: #7a6154;
  --Br5: #9a7c6a;
  --Br6: #ac9384;
  --Br7: #bda99e;
  --Br8: #cebfb7;
  --Br9: #e0d7d1;
  --Br10: #f2eeeb;
  --Si0: #212325;
  --Si1: #27292c;
  --Si2: #36393f;
  --Si3: #535962;
  --Si4: #6f7987;
  --Si5: #8c99aa;
  --Si6: #a0abb9;
  --Si7: #b4bcc7;
  --Si8: #c8ced6;
  --Si9: #dce0e5;
  --Si10: #f0f2f4;
  --Ga0_rgb: 16, 16, 17;
  --Ga0_s_rgb: 30, 32, 34;
  --Ga1_rgb: 10, 11, 12;
  --Ga1_s_rgb: 35, 37, 39;
  --Ga2_rgb: 47, 49, 52;
  --Ga3_rgb: 70, 73, 77;
  --Ga5_rgb: 117, 122, 129;
  --Ga7_rgb: 162, 167, 174;
  --Ga10_rgb: 231, 233, 235;
  --Ga11_rgb: 36, 38, 40;
  --Ga12_rgb: 31, 32, 34;
  --Ga12_s_rgb: 43, 44, 47;
  --Ga13_rgb: 26, 27, 29;
  --Ga13_s_rgb: 47, 49, 52;
  --Wh0_rgb: 23, 24, 26;
  --Wh0_s_rgb: 47, 49, 52;
  --Ba0_rgb: 0, 0, 0;
  --Pi1_rgb: 47, 26, 34;
  --Pi5_rgb: 212, 78, 125;
  --Re1_rgb: 46, 22, 23;
  --Re5_rgb: 209, 64, 62;
  --Or1_rgb: 48, 27, 16;
  --Or5_rgb: 214, 96, 17;
  --Ye1_rgb: 52, 36, 16;
  --Ye5_rgb: 219, 135, 0;
  --Ye6_rgb: 225, 156, 44;
  --Gr1_rgb: 17, 39, 27;
  --Gr5_rgb: 31, 162, 81;
  --Lb1_rgb: 11, 32, 42;
  --Lb5_rgb: 0, 135, 189;
  --Lb7_rgb: 88, 177, 212;
}
// #endregion
